<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<%@ taglib prefix="dict" uri="/WEB-INF/tld/dict.tld" %>
<%@page import="com.nti56.springboot.utils.Constant"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <jsp:include page="../include.jsp"/>
    <script type="text/javascript" src="${ctx}/js/echarts.min.js"></script>
    <script type="text/javascript">
        var barData;
        var echartsBar;//全局变量
        $(function() {
            setHeight();
           
    		$('#proDate').datebox('setValue', '${currYMD}');
    		var proDate = $('#proDate').datebox('getValue');
    		var shift = $('#shift').combobox('getValue');
			getData(proDate,shift,1,10);        
    		
    		var total = "${total}";         
            $('#pp').pagination({
    			onSelectPage:function(pageNumber, pageSize){
    				var proDate = $('#proDate').datebox('getValue');
    	    		var shift = $('#shift').combobox('getValue')
    				getData(proDate,shift,pageNumber,pageSize);
    			},
    			onChangePageSize:function(pageSize){
    				var proDate = $('#proDate').datebox('getValue');
    	    		var shift = $('#shift').combobox('getValue')
    				getData(proDate,shift,1,pageSize);
    			},
    			total:total, 
    			pageList: [10,15] 
    		});
            
        });
		
        
        function getData(proDate,shift,page,rows){
	       	$.ajax({
					type: "POST",
					url: '${ctx}/cncEcharts/getRunTimeData',
					dataType:"json",
					data:{
						proDate : proDate,
						shift:shift,
						page:page,
						rows:rows,
						sort: "MACH_NUM",
						order:"asc"
					},
					success: function(result) {	   						
						//绘制图表						
						var echartsModel = result;
						printBar(echartsModel);
	  				}
			});
        }
        
        function doSearch(){
            var params=$('#queryForm').serializeObject();
            $('#dg').datagrid('load',params);
        }

        function doClear(){
            $('#queryForm').form("clear");
        }

        function setHeight(){
            var c = $('#cc');
            var p = c.layout('panel','center');
            var oldHeight = p.panel('panel').outerHeight();
            var newHeight = p.panel('panel').outerHeight();
            c.layout('resize',{
                height: (c.height() + newHeight - oldHeight),
            });
        }

        function exportExcel() {
            alert("导出功能。。。。。");
        }

        /* 绘制柱状图 */
        function printBar(echartsModel) {
            echartsBar = echarts.init(document.getElementById('echartsBar'));
            option = {
           	    tooltip: {
           	        trigger: 'axis',
	           	    formatter: function (params) {
		           	  	var relVal = params[0].name;
		           	  	var value = 0;
		           	  	for (var i = 0, l = params.length; i < l; i++) {
		           	  		value += params[i].value;
		           	  	}
		           	  	for (var i = 0, l = params.length; i < l; i++) {
		           	  		relVal += '<br/>' + params[i].seriesName + ' : ' + (100 *
		           	  		parseFloat(params[i].value) / parseFloat(value)).toFixed(2) + "%";
		           	  	}
		           	  	return relVal;	
	           	  	},
           	        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
           	            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
           	        }
           	    },
           	 	title: {
	           	    text: '机台运行状态',
           	    	textStyle: {
           	     		color: 'red'
          	   		},	           	    
	           	    padding: [5, 0, 10, 200]  // 位置
           	    },
           	    legend: {
           	        data: echartsModel.legendData
           	    },
           	    grid: {
           	        left: '3%',
           	        right: '4%',
           	        bottom: '3%',
           	        containLabel: true
           	    },
           	    xAxis: {
           	        type: 'value'
           	    },
           	    yAxis: {
           	        type: 'category',
           	        data: echartsModel.yAxisData
           	    },
           	    series: [
           	        {
           	            name: '运行',
           	            type: 'bar',
           	            stack: '总量',
           	            label: {
           	                //show: true,
           	                position: 'insideLeft'
           	            },
           	            data: echartsModel.runData,
	           	        itemStyle: {
	           	            normal: {
	           	                color: function(params) {
	           	                	//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
	           	                    var colorList = ['green'];
	           	                    return colorList[params.dataIndex]
	           	                }
	           	            }
	           	        }           
           	        },
           	        {
           	            name: '停止',
           	            type: 'bar',
           	            stack: '总量',
           	            label: {
           	                //show: true,
           	                position: 'top'
           	            },
           	            data: echartsModel.standData,
	           	        itemStyle: {
	           	            normal: {
	           	                color: function(params) {
	           	                	//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
	           	                    var colorList = ['red'];
	           	                    return colorList[params.dataIndex]
	           	                }
	           	            }
	           	        }           
           	        },
           	        {
           	            name: '报错',
           	            type: 'bar',
           	            stack: '总量',
           	            label: {
           	                //show: true,
           	                position: 'top'
           	            },
           	            data: echartsModel.alarmData,
	           	        itemStyle: {
	           	            normal: {
	           	                color: function(params) {
	           	                	//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
	           	                    var colorList = ['#eef105'];
	           	                    return colorList[params.dataIndex]
	           	                }
	           	            }
	           	        }  
           	        },
           	        {
           	            name: '离线',
           	            type: 'bar',
           	            stack: '总量',
           	            label: {
           	                //show: true,
           	                position: 'insideRight'
           	            },
           	            data: echartsModel.offLineData,
	           	        itemStyle: {
	           	            normal: {
	           	                color: function(params) {
	           	                	//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
	           	                    var colorList = ['gray'];
	           	                    return colorList[params.dataIndex]
	           	                }
	           	            }
	           	        } 
           	        }	           	     
           	    ]
           	};
            echartsBar.setOption(option);
        }
    </script>
</head>
<body>
<div id="cc" class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false" style="height:40px;padding-top:5px;padding-left:5px">
        <form id="queryForm" method="post">
            <div style="margin-bottom:1px;padding-top:1px;padding-left:5px">
				<input class="easyui-datebox" id="proDate" name="proDate" value="" style="width:20%;height:24px;" labelAlign="right" labelWidth="80px" data-options="label:'生产日期:',editable:false,required:true">
                <select class="easyui-combobox" id="shift" name="shift" labelAlign="right" labelWidth="40px" label="班次:"labelPosition="left" editable="false" style="width:15%;height:24px;">
					<c:forEach items="${dictShiftItems}" var="item">
						<option value="${item.itemValue}" >${item.itemText}</option>
					</c:forEach>
				</select>
                <a onclick="doSearch();" href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-search'">查询</a>
            </div>
        </form>
    </div>   
    <div data-options="region:'center',border:false">
        <div id="echartsBar" style="width:100%;height:100%; padding-top:10px;padding-bottom: 5px;"></div>
   		 <div id="pp" class="easyui-pagination" ></div>
    </div>
   
</div>
</body>
</html>